<template>
	<view class="charges">
		<view class="uni-list-cell-db">
			<picker @change="privateChange($event, index)" :value="privateIndex" :range="privateList" range-key="label">
				<view class="uni-input">
					是否私有：{{ isPrivateDate[chargeTypeDetail.isPrivate] }}
				</view>
			</picker>

			<picker @change="tempChange($event, index)" :value="chargeIndex"
				:range="enums['CHARGING_CABINET_CHARGE_TYPE']" range-key="label">
				<view class="uni-input">
					收费类型：{{ chargeTyleData[chargeTypeDetail.chargeType] }}
				</view>
			</picker>
		</view>

		<view style="padding: 30px 0px 0px 0px; margin: 120rpx 6%; text-align: center;">
			<button :loading="editLoading" @click="isConfirm()" type="primary" size="mini"
				style="margin-right: 20rpx; background-color: #4DA7FF; width: 47%; height: 80rpx; line-height: 80rpx;">保存</button>
			<button @click="back()" type="primary" size="mini"
				style="background-color: #C2C2C2; width: 47%; height: 80rpx; line-height: 80rpx;">取消</button>
		</view>

		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="success" title="提示" content="确认要设置已选参数吗？" @confirm="save()"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	import {
		chargeCabint,
		equip
	} from '@/api/equip.js';
	export default {
		data() {
			return {
				chargeTypeDetail: {}, //收费相关
				chargeTyleData: {},
				isPrivateDate: {
					'1': "是",
					'0': '否'
				},
				privateList: [{
						code: '1',
						label: '是'
					},
					{
						code: '0',
						label: '否'
					},
				],
				equipid: '',
				code: '',
				chargeIndex: '',
				privateIndex: '',
			}
		},
		computed: {
			...mapState(['enums'])
		},
		watch: {
			'enums.CHARGING_CABINET_CHARGE_TYPE'(newVal, oldVal) {
				this.chargeTyleData = Object.fromEntries(newVal.map(item => {
					return [item.code, item.label]
				}));
			},
		},
		created() {
			this.$store.dispatch("enums");
		},
		onLoad(option) {
			this.equipid = option.equipid;
			this.code = option.code;
			this.isPrivate();
		},

		methods: {
			// 获取是否私有
			isPrivate() {
				chargeCabint('/selectByCode', 'get', {
					code: this.code
				}).then(res => {
					this.chargeTypeDetail = res.data;
					this.chargeIndex = this.enums['CHARGING_CABINET_CHARGE_TYPE'].findIndex((item) => this
						.chargeTypeDetail.chargeType == item.code);

					this.privateIndex = this.privateList.findIndex((item) => this
						.chargeTypeDetail.isPrivate == item.code);
				})
			},
			tempChange(e, index) {
				this.chargeIndex = e.detail.value;
				this.chargeTypeDetail.chargeType = this.enums['CHARGING_CABINET_CHARGE_TYPE'][e.detail.value].code;
			},
			privateChange(e) {
				this.privateIndex = e.detail.value;
				this.chargeTypeDetail.isPrivate = this.privateList[e.detail.value].code;
			},
			isConfirm() {
				if ((this.chargeTypeDetail.chargeType == null || this.chargeTypeDetail.chargeType == 'null') && (this
					.chargeTypeDetail.isPrivate == null || this
					.chargeTypeDetail.isPrivate == 'null')) {
					this.$Toast.error('请选择设置项！');
					return;
				}
				this.$refs.alertDialog.open();
			},
			save() {
				this.$Toast.loading('设置中···');
				equip('/savePrivate', 'get', {
						code: this.code,
						isPrivate: this.chargeTypeDetail.isPrivate,
						chargeType: this.chargeTypeDetail.chargeType
					})
					.then((res) => {
						if (res.code == 200) {
							this.$Toast.success('参数设置成功');
							setTimeout(() => {
								this.back();
							}, 1500)
						}
					})
			},
			// 返回
			back() {
				let pages = getCurrentPages(); // 当前页面
				let page = getCurrentPages().pop(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 上一页
				uni.navigateBack({
					success: function() {
						beforePage.onLoad(page.options); // 执行上一页的onLoad方法
					}
				});
			}
		},
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	@import "@/static/css/common.scss";

	.charges {
		background: #FFFFFF;
		padding: 20rpx 30rpx;
	}

	.uni-input {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
	}

	picker {
		border-bottom: 1px solid #efefef;
	}
</style>
